<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <title>XPay支付宝收银台</title>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <!-- 主文件 -->
    <link href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/antui.css" rel="stylesheet"/>
    <!-- 组件 -->
    <link href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/??dpl/widget/message.css,dpl/icon/message.css,dpl/widget/search.css"
          rel="stylesheet"/>
    <link href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/notice.css" rel="stylesheet">
    <link href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/tips.css" rel="stylesheet">
    <link href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/dialog.css" rel="stylesheet">
    <!-- js -->
    <script src="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/antui.js"></script>
</head>
<style>
    .am-notice .am-notice-content {
        -webkit-flex: 1;
        overflow: hidden;
        margin-left: 15px;
        margin-right: 5px;
        padding-left: 25px;
    }
</style>

<body>
<div class="am-notice" id="alert" role="alert">
    <div class="am-notice-content">由于客户端版本问题，部分设备可能无法跳转支付</div>
    <div class="am-notice-operation">
        <a class="am-notice-close" onclick="closeAlert()" role="button"></a>
    </div>
</div>
<div class="am-message result">
    <i class="am-icon result wait" id="icon-wait"></i>
    <i class="am-icon result warn" id="icon-fail" style="display: none"></i>
    <div class="am-message-main" id="waiting">等待跳转支付...</div>
    <div class="am-message-sub">若无法自动跳转支付请点击下方立即支付按钮</div>
</div>
<div class="am-button-wrap">
    <!--<button class="am-button blue" onclick="showDialog()">扫码支付</button>-->
    <button class="am-button blue" onclick="showAction()">立即支付</button>
    <button class="am-button white" onclick="returnApp()">取消支付</button>
</div>
<div class="am-tips am-tips-block am-tips-favorite" id="tip">
    <div class="am-tips-wrap">
        <div class="am-tips-close" onclick="closeTip()">关闭</div>
        <div class="am-tips-icon">
            <img src="assets/images/zfb.png">
        </div>
        <div class="am-tips-content am-ft-ellipsis">
            若无法跳转请点击“立即支付”
        </div>
        <div class="am-tips-action" onclick="closeTip()" role="button">
            知道了
        </div>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask" style="display: none"></div>
<div class="am-dialog image show" id="dialog" role="dialog" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img fill">
            <img height="150" src="assets/images/alireamrk.png" width="85%">
        </div>
        <div class="am-dialog-header">
            <h3 id="title">订单标识号：<span id="num1"></span></h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief" id="content">支付时请输入金额：<span id="money"></span>，备注中输入标识号：<span
                    id="num2"></span></p>
        </div>
        <div class="am-dialog-footer">
            <a class="am-dialog-button" id="btn2" onclick="customPay()" style="display: block;"
               type="button">知道了，立即支付</a>
        </div>
        <a class="am-dialog-close" onclick="closeDialog()"></a>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask2" style="display: none"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true"，显示时设置 aria-hidden="false" -->
<div class="am-dialog show" id="dialog2" role="dialog" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-header">
            <h3>请务必选择"普通红包"支付</h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief">请勿修改红包内金额或备注，若系统超过24小时未领取，金额将自动退回您的账户</p>
        </div>
        <div class="am-dialog-footer">
            <button class="am-dialog-button" onclick="redPay()" type="button">知道了，立即支付</button>
        </div>
    </div>
</div>
</body>
<script>

    // 判断是否支付宝内打开
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.indexOf("alipay") < 0) {
        location.href = "http://xpay.exrick.cn";
    }

    function GetRequest() {
        var url = window.location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    var params = GetRequest();
    var money = params['money']
    var num = params['num']

    // 替换你的支付宝userId
    var userId = "2088012242122163";

    // 替换你的自定义金额收款码
    var customUrl = "HTTPS://QR.ALIPAY.COM/FKX056982J2XQG6ZOJHOC2";

    // 如需红包模式请配置如下信息（正规个人收款没必要使用）
    var account = "18782059038"; // 支付宝账号（打开支付宝app点击我的上方-个人主页即可看到支付宝账户）
    var nickName = "Exrick"; // 支付宝昵称（打开支付宝app点击我的上方-个人主页头像下方即你的昵称）

    // 如需银行卡转账模式请填写如下信息（正规个人收款没必要使用）
    var bankAccount = "演示使用，请勿支付"; // 持卡人姓名
    var cardNo = "1234567890123456789"; // 银行卡卡号
    var bankMark = "BOC"; // 银行缩写简写 其他例如CCB中国建设银行 其他自行百度
    var bankName = "中国银行"; // 银行完整名称

    var url = 'alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data=' +
        '{"s": "money","u": "' + userId + '","a": "' + money + '","m": "' + encodeURIComponent(num) + '"}';

    var bankUrl = "https://ds.alipay.com/?from=pc&appId=09999988&actionType=toCard&sourceId=bill&" +
        "cardNo=" + cardNo + "&bankAccount=" + encodeURIComponent(bankAccount)
        + "&money=" + money + "&amount=" + money + "&bankMark=" + bankMark + "&bankName=" + encodeURIComponent(bankName) + "&tdsourcetag=s_pctim_aiomsg";

    var redUrl = "alipays://platformapi/startapp?appId=88886666&appLaunchMode=3&canSearch=false&chatLoginId=" + account
        + "&chatUserId=" + userId + "&chatUserName=" + nickName + "&chatUserType=1&entryMode=personalStage&prevBiz=chat&schemaMode=portalInside&target=personal" +
        "&money=" + money + "&amount=" + money + "&remark=" + num;

    var friendUrl = "alipays://platformapi/startapp?appId=20000186&actionType=addfriend&userId=" + userId + "&loginId=" + account + "&source=by_f_v&alert=true";

    function customPay() {
        location.href = customUrl;
    }

    function redPay() {
        document.getElementById("dialog-mask2").style.display = "none";
        document.getElementById("dialog2").style.display = "none";

        // 加好友
        location.href = friendUrl;
        // 延时启动红包
        setTimeout(function () {
            location.href = redUrl;
        }, 888);

    }

    document.getElementById("money").innerText = money;
    document.getElementById("num1").innerText = num;
    document.getElementById("num2").innerText = num;

    function returnApp() {
        AlipayJSBridge.call("exitApp")
    }

    function closeAlert() {
        document.getElementById("alert").style.display = "none";
    }

    function closeTip() {
        document.getElementById("tip").style.display = "none";
    }

    function closeDialog() {
        document.getElementById("dialog-mask").style.display = "none";
        document.getElementById("dialog").style.display = "none";
    }

    function showDialog() {
        document.getElementById("dialog-mask").style.display = "block";
        document.getElementById("dialog").style.display = "block";
    }

    function showDialog2() {
        document.getElementById("dialog-mask2").style.display = "block";
        document.getElementById("dialog2").style.display = "block";
    }

    function ready(a) {
        window.AlipayJSBridge ? a && a() : document.addEventListener("AlipayJSBridgeReady", a, !1)
    }

    function showAction() {
        AlipayJSBridge.call('actionSheet', {
            'title': '选择支付方式',
            'btns': ['立即支付', '收款码支付(推荐)', '普通红包支付', '银行卡转账(演示)'],
            'cancelBtn': '取消',
        }, function (data) {
            switch (data.index) { // index标示用户点击的按钮，在actionSheet中的位置，从0开始
                case 0:
                    // 无法修改金额
                    location.href = 'alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data=' +
                        decodeURIComponent('{"s": "money","u": "' + userId + '","a": "' + money + '","m": "' + num + '"}');
                    break;
                case 1:
                    // 转账码
                    // location.href = 'alipays://platformapi/startapp?appId=09999988&actionType=toAccount&goBack=NO' +
                    //     '&userId='+userId+'&amount='+money+'&memo='+num;
                    // break;
                    showDialog();
                    break;
                case 2:
                    // 红包
                    showDialog2();
                    break;
                case 3:
                    // 银行卡转账
                    location.href = bankUrl;
                    break;
            }
        });
    }

    ready(function () {
        AlipayJSBridge.call('setTitle', {
            title: 'XPay支付宝收银台'
        });

        var a = {
            actionType: "scan",
            u: userId,
            a: money,
            m: num,
            biz_data: {
                s: "money",
                u: userId,
                a: money,
                m: num,
            }
        }
//            AlipayJSBridge.call('pushWindow', {
//                url: 'alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data=' +
//                '{"s": "money","u": "'+userId+'","a": "'+money+'","m": "='+num+'="}'
//            },function (a) {
//                if(a.errorCode==4){
//                    alert("跳转支付失败，请保存二维码扫码支付")
//                }
//            });
        AlipayJSBridge.call("startApp", {
            appId: "20000123",
            param: a
        }, function (a) {
            if (a.errorCode == 4) {
                document.getElementById("icon-wait").style.display = "none";
                document.getElementById("icon-fail").style.display = "block";
                document.getElementById("waiting").innerText = "自动跳转支付失败";
                alert("跳转支付失败，请点击立即支付")
            }
        });
    });

    //        document.addEventListener("resume", function(a) {
    //            returnApp()
    //        });
</script>
</html>
